<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="author" content="xlorey@126.com">
    <meta name="generator" content="vscode">
    <title>玻璃拟态单词记忆卡</title>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
        }

        .card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            margin: 20px 0;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }

        .word {
            font-size: 2.5em;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            cursor: pointer;
        }

        .meaning {
            font-size: 1.5em;
            color: white;
            background: rgba(255, 255, 255, 0.3);
            padding: 15px 30px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            max-width: 80%;
            text-align: center;
        }

        .hidden {
            opacity: 0;
            filter: blur(5px);
            transform: translateY(20px);
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.3);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        button:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        #fileInput {
            display: none;
        }

        .custom-file-upload {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            cursor: pointer;
            color: white;
            margin-bottom: 20px;
            transition: background-color .3s ease;
        }

        .custom-file-upload:hover {
            background-color: #4ecdc4;
        }

        .progress {
            color: white;
            text-align: center;
            margin: 10px 0;
        }

        .header-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .delete-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            cursor: pointer;
            color: white;
            margin-bottom: 20px;
        }

        .delete-btn:hover {
            background: rgba(255, 99, 71, 0.5) !important;
        }

        .learned-btn {
            margin-top: 20px;
            background: rgba(76, 175, 80, 0.3) !important;
        }

        .learned-btn:hover {
            background: rgba(76, 175, 80, 0.5) !important;
        }

        /* 修改设置面板样式 */
        .settings-panel {
            position: fixed;
            /* 改为固定定位 */
            right: 10px;
            top: 60px;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            display: none;
            min-width: 200px;
            z-index: 1000;
            /* 提高层级 */
            transform: translateX(0);
            /* 添加平移用于动画 */
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.3) !important;
            backdrop-filter: blur(20px);
        }

        /* 添加提示样式 */
        .format-tip {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(0, 0, 0, 0.15);
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            font-size: 0.9em;
            line-height: 1.6;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 100%;
            max-width: 600px;
            box-sizing: border-box;
        }

        /* 修改移动端设置面板样式 */
        @media (max-width: 600px) {
            .settings-panel {
                left: 10%;
                width: 70%;
                max-height: 70vh;
                overflow-y: auto;
            }

            .settings-item {
                flex-direction: row;
                align-items: center;
                margin: 15px 0;
            }

            .settings-item label {
                min-width: 80px;
                margin-right: 10px;
            }

            .format-tip {
                font-size: 0.8em;
                padding: 12px;
                margin: 10px 0;
            }

            .format-tip br {
                display: inline;
            }
        }

        /* 添加遮罩层 */
        .settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.2);
            display: none;
            z-index: 999;
        }

        .settings-item {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            cursor: pointer;
            color: white;
            margin-bottom: 20px;
        }

        .settings-item label {
            margin-right: 10px;
        }

        #settingsBtn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            cursor: pointer;
            color: white;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        #settingsBtn:hover {
            transform: translateY(-5px);
        }

        /* 新增响应式样式 */
        @media (max-width: 600px) {
            .card {
                padding: 20px;
                min-height: 250px;
            }

            .word {
                font-size: 2em;
            }

            .meaning {
                font-size: 1.2em;
                padding: 10px 20px;
            }

            button {
                padding: 8px 16px;
                font-size: 0.9em;
            }
        }
    </style>
</head>

<body>
    <div class="settings-overlay" id="settingsOverlay"></div>
    <div class="container">
        <div class="header-controls">
            <label class="custom-file-upload">
                📁 导入单词表
                <input type="file" id="fileInput" accept=".txt">
            </label>
            <button class="delete-btn" id="clearBtn">🗑️ 清除单词表</button>
            <button id="settingsBtn">⚙️ 系统设置</button>
        </div>

        <div class="settings-panel" id="settingsPanel">
            <div class="settings-item">
                <label>卡片透明度</label>
                <input type="range" id="opacityRange" min="0" max="1" step="0.01" value="0.25">
            </div>
            <div class="settings-item">
                <label>背景主色</label>
                <input type="color" id="bgColor1" value="#ff6b6b">
            </div>
            <div class="settings-item">
                <label>背景辅色</label>
                <input type="color" id="bgColor2" value="#4ecdc4">
            </div>
            <div class="settings-item">
                <label>禁用确认提示</label>
                <input type="checkbox" id="disableConfirm">
            </div>
            <button onclick="resetSettings()" style="width:100%;margin-top:10px;">🔄 恢复默认设置</button>
        </div>

        <div class="card">
            <div class="word" id="word">点击导入单词表</div>
            <div class="meaning hidden" id="meaning"></div>
            <button class="learned-btn" id="markLearnedBtn">✅ 标记为已学会</button>
            <div class="progress" id="progress"></div>
        </div>

        <div class="controls">
            <button id="prevBtn">← 上一个</button>
            <button id="nextBtn">→ 下一个</button>
        </div>
    </div>
    <div class="format-tip">
        📝 导入格式提示：<br>
        1. 使用.txt文本文件<br>
        2. 每行一个单词<br>
        3. 格式：单词 + Tab键 + 解释<br>
        示例：apple↹苹果
    </div>
    <script>
        let words = [];
        let currentIndex = 0;
        let appSettings = {
            cardOpacity: 0.25,
            bgColor1: '#ff6b6b',
            bgColor2: '#4ecdc4',
            disableConfirm: false
        };

        // 加载设置
        function loadSettings() {
            const savedSettings = localStorage.getItem('appSettings');
            if (savedSettings) {
                appSettings = JSON.parse(savedSettings);
                applySettings();
            }
        }

        // 应用设置到界面
        function applySettings() {
            document.getElementById('opacityRange').value = appSettings.cardOpacity;
            document.getElementById('bgColor1').value = appSettings.bgColor1;
            document.getElementById('bgColor2').value = appSettings.bgColor2;
            document.getElementById('disableConfirm').checked = appSettings.disableConfirm;

            // 应用样式
            document.querySelector('.card').style.background =
                `rgba(255, 255, 255, ${appSettings.cardOpacity})`;
            document.body.style.background =
                `linear-gradient(45deg, ${appSettings.bgColor1}, ${appSettings.bgColor2})`;
        }
        // 初始化时检查本地存储
        document.addEventListener('DOMContentLoaded', function () {
            const savedData = localStorage.getItem('wordList');
            if (savedData) {
                if (confirm('检测到本地保存的单词列表，是否加载？')) {
                    try {
                        words = JSON.parse(savedData);
                        currentIndex = 0;
                        updateDisplay();
                    } catch (e) {
                        alert('加载本地存储失败');
                    }
                }
            }
        });

        // 通用文件处理函数
        function handleFile(file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                const content = e.target.result;
                words = content.split('\n')
                    .map(line => {
                        const [word, ...meaning] = line.split('\t');
                        return {
                            word: word.trim(),
                            meaning: meaning.join('\t').trim()
                        };
                    })
                    .filter(item => item.word && item.meaning);

                if (words.length > 0) {
                    currentIndex = 0;
                    updateDisplay();
                    if (confirm('是否将单词列表保存到本地存储？')) {
                        localStorage.setItem('wordList', JSON.stringify(words));
                    }
                }
            };

            reader.readAsText(file);
        }
        // 保存设置
        function saveSettings() {
            localStorage.setItem('appSettings', JSON.stringify(appSettings));
            applySettings();
        }

        // 恢复默认设置
        function resetSettings() {
            appSettings = {
                cardOpacity: 0.25,
                bgColor1: '#ff6b6b',
                bgColor2: '#4ecdc4',
                disableConfirm: false
            };
            localStorage.removeItem('appSettings');
            applySettings();
        }
        // 文件选择事件
        document.getElementById('fileInput').addEventListener('change', function (e) {
            if (e.target.files[0]) handleFile(e.target.files[0]);
        });

        // 拖拽功能实现
        const container = document.querySelector('.container');

        container.addEventListener('dragover', function (e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
            container.style.backgroundColor = 'rgba(255,255,255,0.2)';
        });

        container.addEventListener('dragleave', function (e) {
            container.style.backgroundColor = '';
        });

        container.addEventListener('drop', function (e) {
            e.preventDefault();
            container.style.backgroundColor = '';
            const file = e.dataTransfer.files[0];
            if (file && (file.type === 'text/plain' || file.name.endsWith('.txt'))) {
                handleFile(file);
            } else {
                alert('请拖放.txt格式的文本文件');
            }
        });



        // 显示/隐藏意思
        document.getElementById('word').addEventListener('click', function () {
            const meaningElement = document.getElementById('meaning');
            meaningElement.classList.toggle('hidden');
        });

        // 导航控制
        document.getElementById('prevBtn').addEventListener('click', () => navigate(-1));
        document.getElementById('nextBtn').addEventListener('click', () => navigate(1));

        function navigate(direction) {
            currentIndex = (currentIndex + direction + words.length) % words.length;
            updateDisplay();
        }
        // 清除单词表功能
        document.getElementById('clearBtn').addEventListener('click', function () {
            if (words.length && confirm('确定要清除所有单词吗？')) {
                words = [];
                currentIndex = 0;
                localStorage.removeItem('wordList');
                updateDisplay();
            }
        });
        // 设置面板切换
        document.getElementById('settingsBtn').addEventListener('click', function () {
            const panel = document.getElementById('settingsPanel');
            panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
        });

        // 设置项事件监听
        document.getElementById('opacityRange').addEventListener('input', function (e) {
            appSettings.cardOpacity = parseFloat(e.target.value);
            saveSettings();
        });

        document.getElementById('bgColor1').addEventListener('input', function (e) {
            appSettings.bgColor1 = e.target.value;
            saveSettings();
        });

        document.getElementById('bgColor2').addEventListener('input', function (e) {
            appSettings.bgColor2 = e.target.value;
            saveSettings();
        });

        document.getElementById('disableConfirm').addEventListener('change', function (e) {
            appSettings.disableConfirm = e.target.checked;
            saveSettings();
        });
        // 修改标记已学会功能
        document.getElementById('markLearnedBtn').addEventListener('click', function () {
            if (words.length) {
                const shouldDelete = appSettings.disableConfirm ? true : confirm('确定要标记为已学会吗？');
                if (shouldDelete) {
                    words.splice(currentIndex, 1);
                    if (currentIndex >= words.length) currentIndex = Math.max(0, words.length - 1);
                    localStorage.setItem('wordList', JSON.stringify(words));
                    updateDisplay();
                }
            }
        });
        // 修改updateDisplay函数
        function updateDisplay() {
            const meaningElement = document.getElementById('meaning');
            meaningElement.classList.add('hidden');

            const currentWord = words[currentIndex];
            document.getElementById('word').textContent = currentWord?.word || '点击导入单词表';
            meaningElement.textContent = currentWord?.meaning || '';
            document.getElementById('progress').textContent =
                words.length ? `${currentIndex + 1}/${words.length}` : '';

            // 控制按钮显示状态
            document.getElementById('markLearnedBtn').style.display =
                words.length ? 'inline-block' : 'none';
            document.getElementById('clearBtn').style.display =
                words.length ? 'inline-block' : 'none';
        }
        // 修改初始化显示逻辑
        function toggleSettings(show) {
            isSettingsOpen = show;
            const panel = document.getElementById('settingsPanel');
            const overlay = document.getElementById('settingsOverlay');

            if (show) {
                panel.style.display = 'block';
                overlay.style.display = 'block';
                // 强制重绘确保动画生效
                void panel.offsetHeight;
                panel.style.transform = 'translateY(0)';
                overlay.style.opacity = '1';

                // 移动端自动滚动到可视区域
                if (window.innerWidth <= 600) {
                    panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            } else {
                panel.style.transform = 'translateY(-20px)';
                overlay.style.opacity = '0';
                setTimeout(() => {
                    panel.style.display = 'none';
                    overlay.style.display = 'none';
                }, 300);
            }
        }
        // 添加移动端触摸事件支持
        let touchStartY = 0;
        const panel = document.getElementById('settingsPanel');

        panel.addEventListener('touchstart', function (e) {
            touchStartY = e.touches[0].clientY;
        }, { passive: true });

        panel.addEventListener('touchmove', function (e) {
            const touch = e.touches[0];
            const deltaY = touch.clientY - touchStartY;

            // 阻止页面滚动当滚动到面板边界时
            if (panel.scrollTop === 0 && deltaY > 0) {
                e.preventDefault();
            }
            if (panel.scrollHeight - panel.clientHeight <= panel.scrollTop && deltaY < 0) {
                e.preventDefault();
            }
        }, { passive: false });
        // 修改设置面板交互逻辑
        let isSettingsOpen = false;

        // 点击设置按钮
        document.getElementById('settingsBtn').addEventListener('click', function (e) {
            e.stopPropagation();
            toggleSettings(!isSettingsOpen);
        });

        // 点击遮罩层
        document.getElementById('settingsOverlay').addEventListener('click', function () {
            toggleSettings(false);
        });

        // 点击面板内部阻止冒泡
        document.getElementById('settingsPanel').addEventListener('click', function (e) {
            e.stopPropagation();
        });
        // 窗口大小变化时重置面板
        window.addEventListener('resize', function () {
            if (isSettingsOpen) {
                toggleSettings(false);
            }
        });
        // 初始化显示
        updateDisplay();
    </script>
</body>

</html>